// @import './variables.scss';
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

html {
  height: 100%;
  box-sizing: border-box;
  font-size:var(--baseFontSize);
}

body {
  height: 100%;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  height: 100%;
}

label {
  font-weight: 700;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

div:focus {
  outline: none;
}
// 路由最外层容器
.page-wrapper {
    padding:var(--mPadding) var(--lPadding);
    height:100%;
    overflow:hidden;
}
// 自适应Button组件
.flex-btn {
  font-size:var(--baseFontSize);
  // height:var(--baseHeight);
  // line-height:var(--baseHeight);
  border-radius:6px;
  padding:var(--sPadding) var(--lPadding);
  background-color:var(--primaryColor);
  color:#fff;
  display:inline-flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
  transition:0.1s;
}
.flex-btn > i, .flex-btn > img {
  margin-right:var(--xsPadding);
  font-size:var(--18FontSize);
  line-height:var(--18FontSize);
}
.flex-btn + .flex-btn {
  margin-left:var(--sPadding);
}

.flex-btn.gray {
  background-color:#F2F3F5;
  color:var(--baseTextColor);
}
.flex-btn.gray:hover {
  background-color:#d9dde4;
}
.flex-btn.white {
  background-color:#fff;
  color:#525866;
}
.flex-btn.white:hover {
  background-color:#d9dde4;
}
.flex-btn.opacity {
  background-color: transparent;
  color:var(--primaryColor);
  border:1px solid var(--primaryColor);
}
.flex-btn.opacity:hover {
  background-color:rgba(0, 0, 0, 0.05);
}
.flex-btn:hover {
  background-color:var(--hoverColor);
}

.flex-btn.large {
  padding:var(--mPadding) var(--hPadding);
}
.flex-btn.middle {
  height:unset;
  padding:var(--sPadding) var(--hPadding);
}
.flex-btn.small {
  padding:var(--sPadding);
}
// 自适应分页组件
.flex-pagination.el-pagination {
  li.number, li.more, button.btn-prev, button.btn-next {
    height:calc( 2 * var(--mPadding));
    line-height:calc( 2 * var(--mPadding));
    font-size:var(--baseFontSize);
    min-width:calc( 2 * var(--mPadding));
    .el-icon {
      font-size:var(--baseFontSize);
    }
  }
}
// 自定义Error样式
.flex-input.el-input.isError {
  .el-input__wrapper {
    box-shadow:0 0 0 1px #f56c6c inset
  }
}

.flex-input.el-input.notNum::after {
  content:'请输入数值';
  color:#f56c6c;
  font-size:var(--12FontSize);
  position:absolute;
  left: 0;
  line-height: 1;
  padding-top: 2px;
  position: absolute;
  top: 100%;
}
.flex-input.el-input.notPosInt::after {
  content:'请输入0-100的整数';
  color:#f56c6c;
  font-size:var(--12FontSize);
  position:absolute;
  left: 0;
  line-height: 1;
  padding-top: 2px;
  position: absolute;
  top: 100%;
}
// 自适应弹窗组件
.flex-dialog {
  padding:var(--hPadding);
  .el-dialog__header {
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding-right:0;
    padding-bottom:var(--mPadding);
    margin-bottom:var(--mPadding);
    border-bottom:1px solid #dcdfe6;
    .el-dialog__header .btn {
      position:relative;
      width:var(--lPadding);
      height:var(--lPadding);
    }
  }
  .el-dialog__footer {
    padding-top:0;
  }
}
// 自适应Drawer组件
.flex-drawer {
  width:20vw;
  .el-drawer__header {
    margin:0 var(--hPadding);
    margin-bottom:var(--mPadding);
    padding:var(--mPadding) 0;
    border-bottom:1px solid #dcdfe6;
  }
  .el-drawer__body {
    padding:var(--hPadding);
    padding-top:0;
  }
}
// 自适应Form组件
.flex-form.el-form--label-top {
  .el-form-item.flex-form-item {
      display:flex;
      align-items: center;
      .el-form-item__label {
        margin-bottom:0;
      }
  }
  .el-form-item {
    margin-bottom:var(--mPadding);
    
    .el-form-item__label {
      font-size:var(--baseFontSize);
      margin-bottom:var(--sPadding);
      line-height:var(--lPadding);
      font-weight:bold;
    }
    .el-radio-group {
      display:block;
      width:100%;
      .el-radio {
          display:flex;
          height:auto;
          font-size:var(--baseFontSize);
          padding:var(--mPadding);
          width:100%;
          border: 1px solid #E1E4EA;
          margin-bottom:var(--sPadding);
          border-radius:8px;
          i.ri-information-fill {
              color:#cacfd8;
          }
          .el-radio__input {
              .el-radio__inner {
                  width:var(--baseFontSize);
                  height:var(--baseFontSize);
              }
          }
          .el-radio__label {
              font-size:var(--baseFontSize);
              line-height:var(--baseFontSize);
          }
      }
      .el-radio:hover {
          border-color:#ced3db;
      }
      .el-radio.is-checked {
          border-color:#409eff;
      }
  }
  }
}

// 自适应Popover组件
.flex-popover {
  .flex-popover-content {
    div {
      cursor:pointer; 
      padding:var(--sPadding);
      white-space:nowrap;
      i {
        font-size:var(--18FontSize);
        margin-right:var(--sPadding);
      }
    }
    div.del-btn {
      color:var(--warningTextColor);
    }
  }
}

// Modal组件样式
.el-overlay-dialog .el-dialog.opacity {
  background:transparent;
  box-shadow:none;
  .el-dialog__headerbtn {
    background:rgba(255, 255, 255, 0.65);
    border-radius:50%;
  }

}